<!--
 * @Author: your name
 * @Date: 2021-04-11 17:26:48
 * @LastEditTime: 2021-06-01 18:18:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ws-shop\src\views\Ent.vue
-->
<template>
  <div class="mypets">
    <van-cell is-link @click="showPopup">请选择收货信息</van-cell>
    <van-popup v-model="show2" position="bottom" :style="{ height: '20%' }" @close="add">
      <van-checkbox v-model="checked"> 姓名：{{ name }}、联系电话：{{ tel }}<br/>收货地址：{{ address }}</van-checkbox>
      <van-button round type="info" to="/locations">切换</van-button>
    </van-popup>
    <div id="mine" style="display:none;">{{ name }} 、 {{ tel }} 、 {{ address }}</div>
    <van-cell title="请选择送达时间" :value="date" @click="show = true" />
    <van-calendar v-model="show" @confirm="onConfirm" />
    <van-button round type="info" @click="determine">确认支付</van-button>
  </div>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import Vue from 'vue'
import { Dialog, Toast } from 'vant'

// 全局注册
Vue.use(Dialog, Toast)
export default {
  data () {
    return {
      date: '',
      show: false,
      show2: false,
      checked: true,
      name: '',
      tel: '',
      address: ''
    }
  },
  computed: {
    ...mapGetters(['totalMoney', 'checkCount'])
  },
  created () {
    const a = JSON.parse(localStorage.getItem('Address'))
    this.name = a.name
    this.tel = a.tel
    this.address = a.address
  },
  methods: {
    formatDate (date) {
      return `${date.getMonth() + 1}/${date.getDate()}`
    },
    onConfirm (date) {
      this.show = false
      this.date = this.formatDate(date)
    },
    showPopup () {
      this.show2 = true
    },
    add () {
      document.getElementById('mine').style.display = 'block'
    },
    determine () {
      Dialog.confirm({
        title: '确认订单',
        message: `共${this.checkCount}件,总计￥${this.totalMoney}元`
      })
        .then(() => {
          const toast = Toast.loading({
            duration: 0, // 持续展示 toast
            forbidClick: true,
            message: '正在支付 3 '
          })
          let second = 3
          const timer = setInterval(() => {
            second--
            if (second) {
              toast.message = `正在支付 ${second} `
            } else {
              clearInterval(timer)
              // 手动清除 Toast
              Toast.clear()
              Toast.success('支付成功')
              setTimeout(() => {
                this.$router.push({
                  path: '/cart'
                })
              }, 1000)
            }
          }, 1000)
        })
        .catch(() => {
          this.$router.push({
            path: '/cart'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.van-popup {
  box-sizing: border-box;
  padding: 20px;
  font-size: 14px;
}
.van-button {
  margin-top: 20px;
  width: 95%;
  margin-left: 10px;
}
#mine {
  box-sizing: border-box;
  padding: 0 20px;
  font-size: 14px;
}
</style>
